<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link href="demo.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="../resources/utils.js" charset="utf-8"></script>
	<script type="text/javascript" src="../src/pithy.ajax.js" charset="utf-8"></script>
	<script type="text/javascript" src="../src/pithy.teemplate.js" charset="utf-8"></script>
	<script type="text/javascript" src="demo.js" charset="utf-8"></script>

	<title>Pithy.js.teemplate / extends / Demo</title>
</head>
<body>
	<p id="nav-list"></p>
	<h2>PjtExtends示例</h2>
	<p>PjtExtends需要引用pithy.teemplate.extends.js文件</p>
	<a onclick="__render('default-layout')">任课教师</a> <a onclick="__render('classes')">学习成绩</a>
	<div id="result"></div>
	<script>
		var data = {
			title : 'Anlige',
			subtitle : '教师列表',
			description : '显示本学生的任课教师',
			teachers : [
				{ name : '张三', age : 32},
				{ name : '李四', age : 23},
				{ name : '王二', age : 45}
			],
			classes : [
				{ name : '数学', score : 86},
				{ name : '语文', score : 75},
				{ name : '英语', score : 91}
			]
		}
		function __render(name){
			PjtExtends.render(name, data, function(res){
				id('result').innerHTML = res;
			});
		}
		function __initlize(res){
			
			PjtExtends.compileas(res, function(name, fn){
				//Pjt内部不解析import命令，通过回调的方式，把import命令完全交给用户来处理
				//用户解析玩import命令后，只要把import相关的模板内容通过fn回调给Pjt即可
				//import引入的布局，跟直接在页面写代码有完全一致的效果，可以包含任何有效的指令
				fn('@layout testimport\n<p>定义一个测试布局，用来测试import命令</p>');
			});
			__render('default-layout');
		}
		
		AJAX.require('../src/pithy.teemplate.extends.js', function(){
			AJAX('layouts.html?r=' + Math.random(), __initlize);
		});
		
	</script>
</body>
</html>